<template>
    <div class="total">
        <div class="main">
            <!-- <div @click="$router.go(-1)" class="flex" style="height: 40px;">
                <div><i class="el-icon-arrow-left back"></i></div>
                <div style="padding-left: 270px;font-size: 18px;color: #3D3D3D;">医院科室满意度答卷调查</div>
            </div> -->
            <div class="box">
                <div class="content">
                    <article class="content_title p-l-30 p-t-15">
                        <!--(未对接保存后端)---->
                        <h3>满意度：{{ testList.synthesisScore }}%</h3>
                        <div class="flex p-b-10 p-t-10 nr">
                            <div class="width-50">填写时间：{{ testList.updateTime }}</div>
                            <div class="width-50">IP：{{ testList.ip }}</div>
                        </div>
                        <div class="flex p-b-10 nr">
                            <div class="width-50">来源：{{ testList.sourceName ? testList.sourceName : '暂无' }}</div>
                            <div class="width-50">医院：{{ testList.hosp }}</div>
                        </div>
                        <div class="flex p-b-15 nr">
                            <div class="width-50">姓名：{{ testList.userName }}</div>
                            <div class="width-50">手机号：{{ testList.userPhone }} </div>
                        </div>
                    </article>


                    <div class="card" v-for="v in testList.hcemTemplatTopic" :key="v.id">
                        <article class="card_single" v-if="v.topicType == 1">
                            <div class="card_single_title"> <span class="primary" v-if="v.isRequired == 1">*</span>
                                {{ v.topicName }}<span class="p-l-10 muted">{{ v.linkTypeTitle }}</span>
                            </div>
                            <div class="secondTitle" v-if="v.tip">({{ v.tip }})</div>
                            <div class="card_single_selected">
                                <el-radio-group v-model="value.myScore" v-for="value, key in v.score" disabled>
                                    <div class="m-b-10">
                                        <el-radio :label="value.name">{{ value.name }}</el-radio>
                                        <!-- <span class="muted lg">（3分）</span> -->
                                        <span class="muted lg"></span>
                                    </div>
                                </el-radio-group>
                            </div>
                        </article>
                        <article class="card_checkbox" v-if="v.topicType == 3">
                            <div class="card_checkbox_title"> <span class="primary" v-if="v.isRequired == 1">*</span>{{
                                v.topicName }}
                                <span class="p-l-10 muted">{{ v.linkTypeTitle }}</span>
                            </div>
                            <div class="secondTitle" v-if="v.tip">({{ v.tip }})</div>
                            <div class="card_checkbox_selected">
                                <el-checkbox-group v-model="value.myScore" v-for="value, key in v.score" disabled>
                                    <div class="m-b-10"><el-checkbox :label="value.name"></el-checkbox><span
                                            class="muted lg">（{{ value.score }}分）</span></div>
                                </el-checkbox-group>
                            </div>
                        </article>
                        <article class="card_single_input" v-if="v.topicType == 2">
                            <div class="card_label"> <span class="primary" v-if="v.isRequired == 1">*</span>{{ v.topicName
                            }}
                                <span class="p-l-10 muted">{{ v.linkTypeTitle }}</span>
                            </div>
                            <div class="secondTitle" v-if="v.tip">({{ v.tip }})</div>
                            <el-input v-model="v.score" placeholder="请输入内容" readonly></el-input>
                        </article>
                        <article class="card_muti_input" v-if="v.topicType == 4">
                            <div class="card_label"> <span class="primary" v-if="v.isRequired == 1">*</span>{{ v.topicName
                            }}
                                <span class="p-l-10 muted">{{ v.linkTypeTitle }}</span>
                            </div>
                            <div class="secondTitle" v-if="v.tip">({{ v.tip }})</div>
                            <el-input v-model="v.score" type="textarea" :rows="5" readonly placeholder="请输入内容"></el-input>
                        </article>
                    </div>


                    <footer class="m-t-20 p-b-50">
                        <!-- <el-radio-group v-model="marked" class="flex-row">
                            <div class="md">标记状态：</div>
                            <div class="m-b-10 m-r-10"><el-radio label="1">待处理</el-radio></div>
                            <div class="m-b-10 m-r-10"><el-radio label="2">已处理</el-radio></div>
                            <div class="m-b-10 m-r-10"><el-radio label="3">无需处理</el-radio></div>
                            <div class="m-b-10 m-r-10"><el-radio label="4">未标记（默认）</el-radio></div>
                            <div class="md" style="color: #02C9F0;cursor: pointer;"
                                @click="$router.push({ path: '/system/dict-data/index/105' })">管理</div>
                        </el-radio-group> -->
                        <!--(未对接保存后端)---->
                        <!-- <el-radio-group v-model="marked" class="flex-row">
                            <div class="md">标记状态：</div>
                            <div class="m-b-10 m-r-10"><el-radio v-for="dict in dict.type.topic_content_status" :key="dict.value"
                                :label="parseInt(dict.value)">{{dict.label }}</el-radio></div>
                                <div class="md" style="color: #02C9F0;cursor: pointer;"
                                @click="$router.push({ path: '/system/dict-data/index/105' })">管理</div>
                        </el-radio-group>
                        <div> <el-input v-model="markedText" type="textarea" :rows="5" readonly
                                placeholder="请输入标记"></el-input>
                        </div>
                        <div class="flex row-center m-t-30">
                            <div class="p-r-20"><el-button type="primary">保存标记</el-button></div>
                            <div class="p-l-50 p-r-50"><el-button type="plain">上一份</el-button></div>
                            <div><el-button type="plain">下一份</el-button></div>
                        </div> -->
                    </footer>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { dajuanDetails, hosList, linkDic } from '@/api/hcem/title'
import { listTypeNew } from "@/api/hcem/type";
export default {
    name: 'contentDetails',
    dicts: ['topic_content_status'],
    data() {
        return {
            topImg: require('@/assets/img/top_img.png'),
            single: '',  //单选
            marked: '4',
            markedText: '', //标记内容
            checkList: [],  //多选
            singleText: '极有可能',
            mutiText: '8小时睡眠论可能是错的 大家都认为每天睡够8小时就是健康的睡眠，可是为什么很多人睡够8小时后身体反而更疲劳。实际上睡得好与睡眠时间长短并无必然关系。',
            testList: {},
            options: [],//医院列表选项
            sector: []  //环节
        }
    },
    async created() {
        await this.getHosList()
        await this.textGetList()
        await this.sectorList()
        await this.textGetList()
    },
    methods: {
        async sectorList() {
            // let res = await linkDic()  //环节列表
            // if (res.data.length > 0) {
            //     res.data.map(v => {
            //         this.sector.push({
            //             'value': v.dictValue,
            //             'label': v.dictLabel
            //         })
            //     })
            // }
            let Hospid = {
                hospCode: this.testList.hospId
            }
            let ress = await listTypeNew(Hospid)  //环节列表
            ress.data.map(v => {
                this.sector.push({
                    'value': v.id,
                    'label': v.link_type_name
                })
            })
        },
        //这里不是很科学，同一个接口，请求了两次，后期优化
        async textGetList() {
            let id = this.$route.query.id
            let res = await dajuanDetails(id)
            let hosp = this.options.find((values) => {
                return values.value == res.data.hosp
            })
            // console.log(res, 9090);
            if (hosp !== undefined) {
                res.data.hospId = res.data.hosp
                res.data.hosp = hosp.label
            }
            res.data.hcemTemplatTopic.map(v => {
                try {
                    JSON.parse(v.score)
                    v.score = JSON.parse(v.score)
                    v.scoreInfo = JSON.parse(v.scoreInfo)
                    if (v.linkType !== 0) {
                        this.sector.forEach(r => {
                            //  console.log(r, v);
                            if (r.linkType == v.value) {
                                v.linkTypeTitle = r.label
                            }
                        })
                    } else {
                        v.linkTypeTitle = ''
                    }
                    //  console.log(v, 444);
                    return
                } catch (e) {
                    console.log(e);
                }
                return v
            })
            this.testList = res.data
            // console.log(res.data,121);
        },
        async getHosList() {
            let res = await hosList()
            let data = res.data
            data.forEach(v => {
                this.options.push({
                    value: v.hospital_code,
                    label: v.hospital_name
                })
            })
            // console.log(res);
        },
    },

}
</script>

<style lang='scss' scoped>
.total {
    background-color: #dddddd;

    .main {
        background-color: white;
        width: 800px;
        margin: 0 auto;
        // position: relative;


        .back {
            font-size: 24px;
            padding: 5px 0;
            margin-left: 10px;
            cursor: pointer;
            color: #666666;
        }

        .box {
            // height: 100vh;
            // position: absolute;
            width: 100%;
            padding-top: 30px;
            // margin-top: -30px;
            background: #FFFFFF;
            border-radius: 24px 24px 0px 0px;

            .content {
                padding: 0 30px;
                padding-bottom: 150px;

                .content_title {
                    background-color: rgba(242, 242, 242, 1);
                    position: sticky;
                    z-index: 2;
                    top: 0;
                }

                .discription {
                    padding: 20px 0;
                    color: #999999;
                    font-size: 18px;
                    line-height: 28px;
                    text-indent: 2em;
                }

                .secondTitle {
                    color: #999999;
                    font-size: 14px;
                    line-height: 24px;
                    text-indent: 1em;
                }

                .card {
                    .card_single {
                        .card_single_title {
                            font-size: 17px;
                            font-weight: 500;
                            color: #000000;
                            line-height: 28px;
                            margin-top: 20px;
                        }

                        .card_single_selected {
                            margin-top: 15px;
                            margin-left: 20px;

                            ::v-deep .el-radio__inner {
                                width: 18px !important;
                                height: 18px !important;
                            }

                            ::v-deep .el-radio__label {
                                font-size: 18px;
                            }
                        }
                    }

                    .card_checkbox {
                        .card_checkbox_title {
                            font-size: 17px;
                            font-weight: 500;
                            color: #000000;
                            line-height: 28px;
                            margin-top: 20px;
                        }

                        .card_checkbox_selected {
                            margin-top: 15px;
                            margin-left: 20px;

                            ::v-deep .el-checkbox__inner {
                                width: 18px !important;
                                height: 18px !important;
                            }

                            ::v-deep .el-checkbox__label {
                                font-size: 18px;
                            }
                        }
                    }

                    .card_single_input {
                        // display: flex;
                        margin-top: 15px;
                        margin-right: 30px;

                        ::v-deep .el-input__inner {
                            //  border: none;
                            //border-bottom: 1px solid #ccc;
                        }

                        .card_label {
                            margin-right: 15px;
                            line-height: 40px;
                            // flex-shrink: 0;
                        }

                    }

                    .card_muti_input {
                        //display: flex;
                        margin-top: 15px;
                        margin-right: 30px;
                        // align-items: center;

                        .card_label {
                            margin-right: 15px;
                            line-height: 40px;
                            // flex-shrink: 0;
                        }
                    }

                }

            }

        }
    }
}
</style>